import React, { Component } from 'react';
import {
  StyleSheet, View, Image, Dimensions, ScrollView, DeviceEventEmitter, TouchableOpacity, Alert, TouchableWithoutFeedback,
} from 'react-native';
import { Text } from 'native-base';
import { produce } from 'immer';
import ZlstIcon from '../../../../components/zlst-icons';
import Theme from '../../../../native-base-theme/variables/commonColor';
import { UtilToast } from '../../../../utils/util-method';
import * as sparePartService from '../../../../services/sparePart';
import { FormText } from '../../../../components';
import InfoItem from './info-item';

class Info extends Component {
  static navigationOptions = {
    header: null,
  }

  constructor(props) {
    super(props);
    this.state = {
      createTime: '',
      relatedBillTypeDesc: '',
      catchedName: '',
      catchedRole: '',
      externalBillNo: '',
      warehouseName: '',
      datas: [],
      flag: 0, // 0 出库 1 入库
    };
  }

  // 初始化
  componentDidMount() {
    if (this.props.navigation) { // 路由带入参数
      const par = this.props.navigation.state.params;
      this.getServerInfo(par.code);
    } else {
      this.swipeToDetailListhener = DeviceEventEmitter.addListener('swipeToDetail', this.queryInfoEvent);
    }
  }

  componentWillUnmount() {
    if (this.swipeToDetailListhener) {
      this.swipeToDetailListhener.remove();
    }
  }

  queryInfoEvent = (params) => {
    if (params) {
      this.getServerInfo(params.code);
    }
  }

  getServerInfo = async (externalBillNo) => {
    try {
      DeviceEventEmitter.emit('showLoading', true);
      const data = await sparePartService.queryInOrOutBoundInfo({ externalBillNo });
      DeviceEventEmitter.emit('showLoading', false);
      if (data) {
        this.setState(produce(draft => {
          // eslint-disable-next-line no-restricted-syntax
          draft.createTime = data.createTime;
          draft.relatedBillTypeDesc = data.relatedBillTypeDesc;
          draft.flag = data.relatedBillType == 'O' ? 0 : 1;
          draft.catchedName = data.catchedName;
          draft.catchedRole = data.catchedRole;
          draft.externalBillNo = data.externalBillNo;
          draft.warehouseName = data.warehouseName;
          draft.toWarehouseName = data.toWarehouseName;
          const mdata = [{ materialName: data.materialName, materialCode: data.materialCode, consumeUnit: data.consumeUnit, supplierName: data.supplierName, packageQty: data.packageQty, packageUnit: data.packageUnit, toWarehouseName: data.toWarehouseName, locatorId: data.locatorId, mmLotDto: data.mmLotDto, materialSpecModel: data.materialSpecModel }];
          draft.datas = mdata;
        }));
      }
    } catch (e) {
      console.log(e);
      DeviceEventEmitter.emit('showLoading', false);
    }
  }

  _toMianPage = () => {
    if (this.props.navigation) {
      this.props.navigation.goBack();
    } else {
      DeviceEventEmitter.emit('swiperIncidentPageEvent', -1);
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header_container}>
          <View style={{ flex: 1 }}>
            <TouchableWithoutFeedback onPress={this._toMianPage}>
              <View style={styles.backBtn}>
                <ZlstIcon
                  style={styles.backIcon}
                  name="fanhui"
                  size={20}
                  color="white"
                />
              </View>
            </TouchableWithoutFeedback>
          </View>
          <View style={{ flex: 1, alignItems: 'center' }}><Text style={styles.headerText}>出库记录详情</Text></View>
          <View style={{ flex: 1 }} />
        </View>
        <ScrollView>
          <View>
            <View style={styles.title_container}><FormText name="基础信息" fontColor="black" /></View>
            <FormText name={`${this.state.createTime} ${this.state.relatedBillTypeDesc}`} />
            <FormText name="仓库" value={this.state.warehouseName} />
            {
              this.state.flag == 0 && (
                <View>
                  <FormText name="领料单号" value={this.state.externalBillNo} />
                  <FormText name="领料人" value={this.state.catchedName} />
                  <FormText name="领料单位" value={this.state.catchedRole} />
                </View>
              )
            }
            <View style={styles.title_container}><FormText name="物料清单" fontColor="black" /></View>
            <InfoItem datas={this.state.datas} flag={this.state.flag} />
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    backgroundColor: Theme.myPrimary,
  },
  title_container: {
    width: '100%',
    backgroundColor: 'white',
    borderLeftWidth: 8,
    borderLeftColor: '#4f6fe3',
    paddingTop: 4,
    paddingBottom: 4,
    // borderRadius: 4,
  },
  header_container: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },
  headerText: {
    color: 'white',
    fontWeight: 'bold',
  },
  backBtn: {
    paddingLeft: 8,
    paddingRight: 8,
    paddingTop: 16,
    paddingBottom: 16,
  },
});

export default Info;
